<template>
  <div class="app">
    <el-main>
      <div class="container">
        <div class="status-bar">
          <div class="status-group">
            <!--            状态区-->
            <div
                v-for="(status, index) in state.TagStatuses"
                :key="index"
                :class="{ active: activeIndex === index }"
                @click="handleStatusClick(index)"
                class="status-item"
            >
              <div :style="getStatusStyle(index)">
                <div v-if="index===0">
                  <el-icon style="vertical-align: middle">
                    <VideoPlay />
                  </el-icon>
                  {{status.label}}
                </div>
                <div v-if="index===1">
                  <el-icon style="vertical-align: middle">
                    <VideoPause />
                  </el-icon>
                  {{ status.label }}
                </div>
                <div v-if="index===2">
                  <el-icon style="vertical-align: middle">
                    <Remove />
                  </el-icon>
                  {{ status.label }}
                </div>
              </div>
              <div v-if="index < state.TagStatuses.length - 1" class="separator"></div>
            </div>
          </div>


          <!--          列目显示-->
          <div class="button-column">
            <el-button @click="showForm" type="primary">
              <el-icon style="vertical-align: middle">
                <Plus />
              </el-icon>
              <span style="vertical-align: middle">列目显示</span>
            </el-button>
            <el-dialog v-model="showDialog" title="列目显示" style="width: 500px;height: 600px;">
              <div style="border-bottom: 1px solid #ccc;"></div>
              <h3>基础字段</h3>
              <el-checkbox-group v-model="tempBasic">
                <el-checkbox v-for="column in state.basicColumns" :key="column.key" :label="column.key">{{ column.title }}</el-checkbox>
              </el-checkbox-group>
              <h3>效果数据字段</h3>
              <el-checkbox-group v-model="tempEffect">
                <el-checkbox v-for="column in state.effectColumns" :key="column.key" :label="column.key">{{ column.title }}</el-checkbox>
              </el-checkbox-group>
              <span slot="footer" class="dialog-footer">
            <el-button @click="hideForm">取 消</el-button>
            <el-button type="primary" @click="apply">确 定</el-button>
            </span>
            </el-dialog>
          </div>
        </div>
      </div>

      <el-form :inline="true" class="search-form">
        <el-form>
          <el-form-item label="任务编号:">
            <el-input v-model="state.searchCriteria.frwid" placeholder="请输入任务编号" style="width: 120px" clearable></el-input>
          </el-form-item>

          <el-form-item label="任务名称:">
            <el-input v-model="state.searchCriteria.frwmc" placeholder="请输入任务名称" style="width: 120px" clearable></el-input>
          </el-form-item>

          <el-form-item label="话术模板:">
            <el-select v-model="state.searchCriteria.fhsmblx" placeholder="请选择话术模板" style="width: 150px" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(value, key) in state.templateMap" :key="key" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="activeIndex !== 2" label="任务状态:">
            <el-select v-model="state.searchCriteria.frwzt" placeholder="请选择任务状态" style="width: 150px" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(value, key) in state.statusMap" :key="key" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="activeIndex !== 2" label="任务类型:">
            <el-select v-model="state.searchCriteria.frwlx" placeholder="请选择任务类型" style="width: 150px" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(value, key) in state.typeMap" :key="key" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="activeIndex === 2" label="启动日期:">
            <el-date-picker
                v-model="dateTime"
                type="datetimerange"
                start-placeholder="启动日期"
                end-placeholder="结束日期"
                :default-time="defaultTime"
                clearable
            />
          </el-form-item>

          <el-form-item label="创建人:">
            <el-select v-model="state.searchCriteria.frwjlr" placeholder="请选择创建人" style="width: 150px" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="owner in state.owners" :key="owner" :label="owner" :value="owner"></el-option>
            </el-select>
          </el-form-item>



        </el-form>

        <el-form>
          <el-form-item>
            <el-button type="primary" @click="load">
              <el-icon style="vertical-align: middle">
                <Search />
              </el-icon>
              <span style="vertical-align: middle">查询</span>
            </el-button>
            <!--            引入创建任务表单-->
            <!-- refreshData用于子组件提交表单时刷新页面数据 -->
            <!--            ref="componentRef"用于接收子组件的方法-->
            <TaskForm @formSubmitted="refreshData" ref="componentRef"/>
          </el-form-item>
        </el-form>
      </el-form>


<!--      筛选后的列表-->
      <div>
        <el-table :data="state.filteredData" border @selection-change="handleSelectionChange" ref="multipleTableRef">
          <el-table-column type="selection" width="55" />
          <el-table-column v-for="column in computedColumns"
                           :key="column.key"
                           :prop="column.key"
                           :label="column.title"
                           :fixed="['actions', 'rwmx'].includes(column.key) ? 'right' : false"
                           :width="column.key === 'actions' ? '180px' : '110px'"
                           align="center"
          >
            <template v-slot:default="{row}">
              <div v-if="column.key === 'frwlx'">
                {{ state.typeMap[row.frwlx] }}
              </div>
              <div v-if="column.key === 'frwzt'">
                {{ state.statusMap[row.frwzt] }}
              </div>
              <div v-if="column.key === 'fhsmblx'">
                {{ state.templateMap[row.fhsmblx] }}
              </div>
              <div v-if="column.key === 'frwjlsj'">
                {{ formatDateTime(row.frwjlsj) }}
              </div>
              <div v-if="column.key === 'rwmx'">
                <div>
                  <el-button type="primary" @click="Detail(row)">明细</el-button>
                </div>
              </div>
              <div v-if="column.key === 'actions'">
                <div>
                  <div v-if="activeIndex === 0">
                    <el-button type="primary" @click="handleEdit(row)" :disabled="true">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(row)" :disabled="true">删除</el-button>
                  </div>
                  <div v-if="activeIndex !== 0">
                    <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(row)">删除</el-button>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-if="activeIndex === 0" style="margin-top: 15px">
        <el-button type="primary" @click="startTask" :disabled="startTaskbt">开启外呼任务</el-button>
        <el-button type="danger" @click="stopTask" :disabled="stopTaskbt">停止外呼任务</el-button>
        <el-button type="danger" @click="BatchRecall" :disabled="BatchRecallbt">批量重呼</el-button>
      </div>

      <div v-if="activeIndex === 1" style="margin-top: 15px">
        <el-button type="primary" @click="startTask">开启</el-button>
        <el-button type="danger" @click="stopTask" :disabled="true">停止</el-button>
        <el-button type="danger" @click="BatchRecall">批量重呼</el-button>
      </div>

      <div v-if="activeIndex === 2" style="margin-top: 15px">
        <el-button type="primary" @click="startTask">开启</el-button>
      </div>

    </el-main>
  </div>


  <div v-if="activeIndex === 0">
    <el-dialog v-model="DetailVisible" width="1400px" title="任务明细">
      <el-table :data="state.DetailData" style="margin-top: 20px" ref="elTableRef" border>
        <!--      <el-table-column label="编号" prop="fid"></el-table-column>-->
        <!--      <el-table-column label="公司号" :width="120" prop="fgsid"></el-table-column>-->
<!--        <el-table-column label="客户姓名" :width="130" prop="fkhmc"></el-table-column>-->
<!--        <el-table-column label="客户电话" :width="130" prop="fzjhm" ></el-table-column>-->
        <el-table-column label="主叫号码" :width="130" prop="fzjhm"></el-table-column>
        <el-table-column label="客户电话" :width="130" prop="fkhsjhm" ></el-table-column>
        <el-table-column label="客户手机号码md5" :width="130" prop="fkhsjhmmd5" ></el-table-column>
        <el-table-column label="客户微信号" :width="130" prop="fkhwxh" ></el-table-column>
        <el-table-column label="状态" :width="130" prop="fzt" >
          <template v-slot:default="{row}">
            <span v-if="row.fzt === 1">未开启</span>
            <span v-if="row.fzt === 2">进行中</span>
            <span v-if="row.fzt === 3">暂停</span>
            <span v-if="row.fzt === 4">已完结</span>
            <span v-if="row.fzt === 5">拨打时间段外</span>
            <span v-if="row.fzt === 6">排队中</span>
            <span v-if="row.fzt === 7">已过期</span>
          </template>
        </el-table-column>
        <el-table-column label="AI外呼" :width="130" prop="fstepAICalloutZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepAICalloutZT === '0'">未完成</span>
            <span v-if="row.fstepAICalloutZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="AI座席" :width="130" prop="fstepAIseatZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepAIseatZT === '0'">未完成</span>
            <span v-if="row.fstepAIseatZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="人工外呼" :width="130" prop="fstepManualcalloutZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepManualcalloutZT === '0'">未完成</span>
            <span v-if="row.fstepManualcalloutZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="人工座席" :width="130" prop="fstepManualSeatZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepManualSeatZT === '0'">未完成</span>
            <span v-if="row.fstepManualSeatZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="语音通知" :width="130" prop="fstepVoicenotificationZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepVoicenotificationZT === '0'">未完成</span>
            <span v-if="row.fstepVoicenotificationZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="短链接" :width="130" prop="fstepSmssurlZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepSmssurlZT === '0'">未完成</span>
            <span v-if="row.fstepSmssurlZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="短信" :width="130" prop="fstepSmsZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepSmsZT === '0'">未完成</span>
            <span v-if="row.fstepSmsZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" :width="130" prop="fstepEmailZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepEmailZT === '0'">未完成</span>
            <span v-if="row.fstepEmailZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="微信" :width="130" prop="fstepWechatZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepWechatZT === '0'">未完成</span>
            <span v-if="row.fstepWechatZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="QRcode" :width="130" prop="fstepQRcodeZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepQRcodeZT === '0'">未完成</span>
            <span v-if="row.fstepQRcodeZT === '1'">已完成</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>

  <div v-if="activeIndex !== 0">
    <el-dialog v-model="DetailVisible" width="1400px" title="任务明细">

      <div style="display: flex; gap: 10px;">
        <el-button type="primary" @click="createForm">
          <span style="vertical-align: middle">新增</span>
        </el-button>

        <!--      <el-button type="primary" @click="importForm">-->
        <!--        <span style="vertical-align: middle">批量导入</span>-->
        <!--      </el-button>-->
        <el-upload
          class="upload-demo"
          action=""
          :http-request="uploadFile"
          accept=".xlsx,.xls"
          :show-file-list="false"
        >
          <el-button type="primary">
            <span style="vertical-align: middle">批量导入</span>
          </el-button>
        </el-upload>

      </div>


      <el-table :data="state.DetailData" style="margin-top: 20px" ref="elTableRef" @selection-change="handleSelection" border>
        <!--      <el-table-column label="编号" prop="fid"></el-table-column>-->
        <!--      <el-table-column label="公司号" :width="120" prop="fgsid"></el-table-column>-->
        <el-table-column type="selection" width="55"></el-table-column>
<!--        <el-table-column label="客户手机号码" :width="130" prop="fkhsjhm" ></el-table-column>-->
        <el-table-column label="主叫号码" :width="130" prop="fzjhm" ></el-table-column>
<!--        <el-table-column label="客户姓名" :width="130" prop="fkhmc" ></el-table-column>-->
        <el-table-column label="客户电话" :width="130" prop="fkhsjhm" ></el-table-column>
        <el-table-column label="客户手机号码md5" :width="130" prop="fkhsjhmmd5"></el-table-column>
        <el-table-column label="客户微信号" :width="130" prop="fkhwxh" ></el-table-column>
        <el-table-column label="状态" :width="130" prop="fzt" >
          <template v-slot:default="{row}">
            <span v-if="row.fzt === 1">未开启</span>
            <span v-if="row.fzt === 2">进行中</span>
            <span v-if="row.fzt === 3">暂停</span>
            <span v-if="row.fzt === 4">已完结</span>
            <span v-if="row.fzt === 5">拨打时间段外</span>
            <span v-if="row.fzt === 6">排队中</span>
            <span v-if="row.fzt === 7">已过期</span>
          </template>
        </el-table-column>
        <el-table-column label="呼入" :width="130" prop="fstepCallinZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepCallinZT === '0'">未完成</span>
            <span v-if="row.fstepCallinZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="AI外呼" :width="130" prop="fstepAICalloutZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepAICalloutZT === '0'">未完成</span>
            <span v-if="row.fstepAICalloutZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="AI座席" :width="130" prop="fstepAIseatZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepAIseatZT === '0'">未完成</span>
            <span v-if="row.fstepAIseatZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="人工外呼" :width="130" prop="fstepManualcalloutZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepManualcalloutZT === '0'">未完成</span>
            <span v-if="row.fstepManualcalloutZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="人工座席" :width="130" prop="fstepManualSeatZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepManualSeatZT === '0'">未完成</span>
            <span v-if="row.fstepManualSeatZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="语音通知" :width="130" prop="fstepVoicenotificationZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepVoicenotificationZT === '0'">未完成</span>
            <span v-if="row.fstepVoicenotificationZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="短链接" :width="130" prop="fstepSmssurlZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepSmssurlZT === '0'">未完成</span>
            <span v-if="row.fstepSmssurlZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="短信" :width="130" prop="fstepSmsZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepSmsZT === '0'">未完成</span>
            <span v-if="row.fstepSmsZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" :width="130" prop="fstepEmailZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepEmailZT === '0'">未完成</span>
            <span v-if="row.fstepEmailZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="微信" :width="130" prop="fstepWechatZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepWechatZT === '0'">未完成</span>
            <span v-if="row.fstepWechatZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="QRcode" :width="130" prop="fstepQRcodeZT" >
          <template v-slot:default="{row}">
            <span v-if="row.fstepQRcodeZT === '0'">未完成</span>
            <span v-if="row.fstepQRcodeZT === '1'">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="140">
          <template v-slot:default="{ row }">
            <el-button @click="editRow(row)" type="primary" size="small">编辑</el-button>
            <el-button @click="deleteRow(row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 10px">
        <el-checkbox v-model="selectAll"
                     label="当页全选"
                     size="large"
                     @change="handleSelectAll" />
        <el-button type="danger" style="margin-left: 15px" @click="handleBatchDelete()">批量删除</el-button>
      </div>

    </el-dialog>

    <el-dialog v-model="editDialogVisible" title="编辑任务明细" style="width: 600px">
      <div style="border-bottom: 1px solid #eee;margin-top: -20px;margin-bottom: 15px"></div>
      <el-form :model="state.editFormData" label-width="140px">
        <el-form-item label="主叫号码:">
          <el-input v-model="state.editFormData.fzjhm" style="width: 160px"></el-input>
        </el-form-item>
        <el-form-item label="客户手机号码:">
          <el-input v-model="state.editFormData.fkhsjhm" style="width: 160px"></el-input>
        </el-form-item>
        <el-form-item label="客户手机号码md5:">
          <el-input v-model="state.editFormData.fkhsjhmmd5" style="width: 160px"></el-input>
        </el-form-item>
        <el-form-item label="客户微信号:">
          <el-input v-model="state.editFormData.fkhwxh" style="width: 160px"></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="state.editFormData.fzt" placeholder="请选择任务状态" style="width: 150px" clearable>
            <el-option v-for="(value, key) in state.statusMap" :key="key" :label="value" :value="Number(key)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="呼入:">
          <el-radio-group v-model="state.editFormData.fstepCallinZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="AI外呼:">
          <el-radio-group v-model="state.editFormData.fstepAICalloutZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="AI座席:">
          <el-radio-group v-model="state.editFormData.fstepAIseatZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="人工外呼:">
          <el-radio-group v-model="state.editFormData.fstepManualcalloutZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="人工座席:">
          <el-radio-group v-model="state.editFormData.fstepManualSeatZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="语音通知:">
          <el-radio-group v-model="state.editFormData.fstepVoicenotificationZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="短链接:">
          <el-radio-group v-model="state.editFormData.fstepSmssurlZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="短信:">
          <el-radio-group v-model="state.editFormData.fstepSmsZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-radio-group v-model="state.editFormData.fstepEmailZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="微信:">
          <el-radio-group v-model="state.editFormData.fstepWechatZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="QRcode:">
          <el-radio-group v-model="state.editFormData.fstepQRcodeZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>




      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="updateDetail">确定</el-button>
  </span>
    </el-dialog>


    <el-dialog v-model="dialogVisible" title="添加任务明细" @close="resetFormData">
      <div style="border-bottom: 1px solid #eee;margin-top: -20px;margin-bottom: 15px"></div>
      <el-form :model="state.addFormData" label-width="140px">
        <el-form-item label="主叫号码:">
          <el-input v-model="state.addFormData.fzjhm" style="width: 160px"></el-input>
        </el-form-item>
        <el-form-item label="客户手机号码:">
          <el-input v-model="state.addFormData.fkhsjhm" style="width: 160px"></el-input>
        </el-form-item>
        <el-form-item label="客户手机号码md5:">
          <el-input v-model="state.addFormData.fkhsjhmmd5" style="width: 160px"></el-input>
        </el-form-item>
        <el-form-item label="客户微信号:">
          <el-input v-model="state.addFormData.fkhwxh" style="width: 160px"></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="state.addFormData.fzt" placeholder="请选择任务状态" style="width: 150px" clearable>
            <el-option v-for="(value, key) in state.statusMap" :key="key" :label="value" :value="Number(key)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="呼入:">
          <el-radio-group v-model="state.addFormData.fstepCallinZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="AI外呼:">
          <el-radio-group v-model="state.addFormData.fstepAICalloutZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="AI座席:">
          <el-radio-group v-model="state.addFormData.fstepAIseatZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="人工外呼:">
          <el-radio-group v-model="state.addFormData.fstepManualcalloutZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="人工座席:">
          <el-radio-group v-model="state.addFormData.fstepManualSeatZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="语音通知:">
          <el-radio-group v-model="state.addFormData.fstepVoicenotificationZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="短链接:">
          <el-radio-group v-model="state.addFormData.fstepSmssurlZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="短信:">
          <el-radio-group v-model="state.addFormData.fstepSmsZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-radio-group v-model="state.addFormData.fstepEmailZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="微信:">
          <el-radio-group v-model="state.addFormData.fstepWechatZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="QRcode:">
          <el-radio-group v-model="state.addFormData.fstepQRcodeZT">
            <el-radio label="0">未完成</el-radio>
            <el-radio label="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="addDetail">确定</el-button>
    </span>
    </el-dialog>

  </div>

  <el-dialog v-model="batchVisible" title="批量重呼">
    <div style="border-bottom: 1px solid #eee;margin-top: -20px;margin-bottom: 15px"></div>
    <el-form :model="state.chonghuData" label-width="140px">
<!--      <el-table-column label="主叫号码" ></el-table-column>-->
<!--      <el-table-column label="客户手机号码"></el-table-column>-->
<!--      <el-table-column label="客户手机号码md5"></el-table-column>-->
<!--      <el-table-column label="客户微信号"></el-table-column>-->
<!--      <el-table-column label="状态"></el-table-column>-->
    </el-form>

  </el-dialog>

</template>



<script  setup>
import {reactive, ref, computed, onMounted, watchEffect} from 'vue'
import {Search, Plus, VideoPlay, VideoPause, Remove} from '@element-plus/icons-vue'
import request from "@/utils/request";
import TaskForm from "./TaskForm.vue";
import moment from "moment"
import {ElMessage, ElMessageBox} from "element-plus";
import {mapState} from "@/utils/mapState";
const state = reactive(mapState().Task)
const activeIndex = ref(0);
import { useAccount } from '@/pinia/modules/account'
import axios from 'axios'

import { storeToRefs } from 'pinia'
//记录任务开始日期和结束日期
const dateTime = ref(null)
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]
// 提取筛选逻辑
const filterTasks = () => {
  const selectedStatus = state.TagStatuses[activeIndex.value].statuses;
  return state.tableData.filter(task => selectedStatus.includes(task.frwzt));
}
//控制按钮是否可用
let startTaskbt=ref(true)
let stopTaskbt=ref(false)
let BatchRecallbt=ref(false)

const useraccount=useAccount();

//按照用户级别显示按钮数量
const parseUser = () => {
  if(useraccount.userinfo.yhlx===2){
    startTaskbt.value = false
  }else if(useraccount.userinfo.yhlx===3){
    console.log(useraccount.userinfo.yhlx)
    stopTaskbt.value=true
    BatchRecallbt.value=true
  }
}

//筛选状态信息
const handleStatusClick = (index) => {
  if (activeIndex.value !== index) {
    // 如果状态已经改变，那么清空搜索条件，并重新加载数据
    dateTime.value = null
    state.searchCriteria = {}
    load()
  }
  activeIndex.value = index;
  state.filteredData = filterTasks();
}

//动态渲染当前选中的状态
const getStatusStyle = (index) => ({
  color: activeIndex.value === index ? 'blue' : 'black',
  marginLeft: '30px',
  marginRight: '30px',
});
const fetchOwners = () => {
  request.get("/task/findOwner").then(res =>{
    console.log(res.data)
    state.owners = res.data
  })

}
// 列目展示部分
const showDialog = ref(false);
const BasicColumns = ref(['frwid','frwmc', 'frwlx', 'frwzt', 'fhsmblx', 'smsTemplate', 'frwjlsj','rwmx', 'actions']);
const EffectColumns = ref(state.effectColumns.map(column => column.key));  // 默认展示所有效果数据字段
const computedColumns = computed(() => {
  return [...state.basicColumns, ...state.effectColumns].filter(column => BasicColumns.value.includes(column.key) || EffectColumns.value.includes(column.key));
});

//列目展示表单操作
const tempBasic = ref([...BasicColumns.value]);
const tempEffect = ref([...EffectColumns.value]);

const showForm = () => {
  tempBasic.value = [...BasicColumns.value];
  tempEffect.value = [...EffectColumns.value];
  showDialog.value = true;
};
const hideForm = () => {
  showDialog.value = false;
};
const apply = () => {
  BasicColumns.value = [...tempBasic.value];
  EffectColumns.value = [...tempEffect.value];
  showDialog.value = false;
};

//监听dateTime的变化
watchEffect(() => {
  if (dateTime.value === null) {
    state.searchCriteria.frwksrq = null;
    state.searchCriteria.frwjsrq = null;
  } else {
    state.searchCriteria.frwksrq = dateTime.value[0];
    state.searchCriteria.frwjsrq = dateTime.value[1];
  }
});

//查询后台数据
const load = () => {
  request.post("/task/find",state.searchCriteria).then(res=>{
    state.tableData = res.data
    // 查询后再次进行筛选
    state.filteredData = filterTasks();
  });
};

onMounted(() => {
  load();
  fetchOwners();
  parseUser();
});

// 格式化时间
const formatDateTime = (value) => {
  return moment(value).format('YYYY-MM-DD HH:mm:ss');
};

const handleSelectionChange = (val) => {

  state.multipleSelection = val
}

//父子组件操作部分
//1、创建一个指向子组件的引用
const componentRef = ref(null)
const handleEdit = (row) => {
  componentRef.value.edit(row);//调用子组件的edit方法
};


const handleDelete = (row) => {

  ElMessageBox.confirm('确定删除该记录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(()=> {

    request.post("/task/del/" + row.frwid).then(res => {
        ElMessage.success('删除成功')
        load()
    }).catch(error => {
      console.log(error)
      ElMessage.error('删除失败')
    })
  }
  )
};

//2、用于TaskForm表单提交后刷新数据
const refreshData = async() => {
  load()
}

//任务操作部分
const getSelectedRwids = () => {
  return state.multipleSelection.map(task => task.frwid);
}
const datastart={
  company_id:'',
  task_ids:[]

}
const startTask = () => {

  //判断是否为公司管理员
  if(useraccount.userinfo.yhlx===2){
    let port_ip='';
    //给分配任务机器人传参
    request.post("/xtcs/selectCALLSERVER").then((res)=>{
      datastart.company_id=res.data.fgsid;
      port_ip=res.data.fcsz;
      datastart.task_ids=state.multipleSelection.map((row)=>{
        return row.frwid
      })
      console.log('task_ids',datastart.task_ids)

     // 请求第一个接口
      request.post('/zs/ai/outbound/BotAllot',datastart).then((val)=>{
        console.log(val.code)
       if(val.code===20000)
       {
         console.log('执行正确接口1！！！')
         //第一个接口请求正确 请求第二个接口 否则返回错误
         request.post('/zs/ai/outbound/batchtasks',datastart).then((msg)=>{
           if(msg.code===20000){
             console.log('执行正确接口2！！！')
           }else{
             console.log('执行错误接口2出错！！！')
           }
         })
       }else{
         console.log('执行错误接口1出错！！！')
       }
      })



      // const server=axios.create({
      //   baseURL:'http://'+port_ip,
      //   timeout:20000,
      // })

     //请求第一个接口
     //  server.post('/zs/ai/outbound/BotAllot',datastart).then((val)=>{
     //    console.log(val.code)
     //    if(val.code===20000)
     //    {
     //      console.log('执行正确接口1！！！')
     //      //第一个接口请求正确 请求第二个接口 否则返回错误
     //      server.post('/zs/ai/outbound/batchtasks',datastart).then((msg)=>{
     //        if(msg.code===20000){
     //          console.log('执行正确接口2！！！')
     //        }else{
     //          console.log('执行错误接口2出错！！！')
     //        }
     //      })
     //
     //    }else{
     //      console.log('执行错误接口1出错！！！')
     //    }
     //  })

    })


  }else {

    const selectedRwids = getSelectedRwids();
    if (selectedRwids.length === 0) {
      ElMessage.error('请先选择任务');
      return;
    }

    request.post('/task/start', { rwids: selectedRwids }).then(res => {
          ElMessage.success('任务开启成功');
          load()
        }
    ).catch(err => {
      console.error(err);
      ElMessage.error('任务开启失败')
    })
  }
};




const stopTask = () => {
  const selectedRwids = getSelectedRwids();
  if(selectedRwids.length === 0){
    ElMessage.warning('请先选择任务');
    return;
  }

  request.post('/task/stop',{rwids: selectedRwids}).then(res=>{

          ElMessage.success('任务暂停成功');
          load()
  }
  ).catch(err => {
    console.error(err);
    ElMessage.error('任务暂停失败')
  })
};

const DetailVisible = ref(false)
const Detail =(row)=>{
  console.log("aaaa")
  DetailVisible.value = true
  state.currentid = row.frwid
  state.currentGsid = row.fgsid
  request.post(`/detail/findById/`+ row.frwid).then(res =>{
    state.DetailData = res.data

    console.log("+++++++++")
    console.log(state.DetailData)
    console.log(res.data)
    console.log(res)
    console.log("=========")
  })
}
const deleteRow = (row) => {
  // 显示确认对话框
  ElMessageBox.confirm("确定删除该记录吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {

    request.post("/detail/del/" + row.fid).then(res => {

      ElMessage.success("删除成功");
      request.post(`/detail/findById/`+ row.frwid).then(res =>{
        state.DetailData = res.data

      })
    }).catch(error => {
      console.log(error);
      ElMessage.error("删除失败");
    });

  });
};

const elTableRef = ref(null);
const selectAll = ref(false);

const clearSelection = () => {
  state.mxselection = [];
  selectAll.value = false;
};
const handleSelection = (val) => {
  state.mxselection = val;
  selectAll.value = state.DetailData.length && val.length === state.DetailData.length;

  state.taskid = val.length > 0 ? val[0].frwid : null;
};

const handleSelectAll = () => {
  elTableRef.value.clearSelection(); // 先清除所有的选择
  if (selectAll.value) {
    elTableRef.value.toggleAllSelection(); // 如果是全选状态，则全选所有行
  }
};
const handleBatchDelete = () => {
  if (!state.mxselection.length) {
    ElMessage.warning("请至少选择一条记录");
    return;
  }

  // 显示确认对话框
  ElMessageBox.confirm("确定删除所选记录吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    const ids = state.mxselection.map(item => item.fid);


    request.post("/detail/del/batchDelete", ids)
      .then(res => {
        ElMessage.success("批量删除成功");
        clearSelection();

        request.post(`/detail/findById/`+ state.taskid).then(res =>{
          state.DetailData = res.data
        })

      })
      .catch(err => {
        console.error(err);
        ElMessage.error("批量删除失败");
      });
  });
};

const editDialogVisible = ref(false);
const editRow = (row) => {
  state.editid = row.frwid
  state.editFormData = { ...row }; // 复制选中行的数据到formData
  console.log("+++++++++++++++++")
  console.log(state.editFormData)
  console.log("++++++++++++++++")
  editDialogVisible.value = true; // 打开对话框
};

const updateDetail = () => {
  // 这里可以调用API来更新黑名单
  console.log(state.editFormData);
  request.post("/detail/update", state.editFormData).then(res => {
    ElMessage.success("更新成功");
    request.post(`/detail/findById/`+ state.editid).then(res =>{
      state.DetailData = res.data
    })

  }).catch(error => {
      console.log(error);
      ElMessage.error("更新失败");
    }
  );

  editDialogVisible.value = false;
};
const dialogVisible = ref(false);
const createForm =()=>{
  dialogVisible.value = true;
}
const resetFormData = () => {
  state.addFormData = {
    fstepCallinZT : "0",
    fstepAICalloutZT : "0",
    fstepAIseatZT : "0",
    fstepManualcalloutZT : "0",
    fstepManualSeatZT : "0",
    fstepVoicenotificationZT : "0",
    fstepSmssurlZT : "0",
    fstepSmsZT : "0",
    fstepEmailZT : "0",
    fstepWechatZT : "0",
    fstepQRcodeZT : "0"
  }
};
const addDetail = () => {

  state.addFormData.frwid = state.currentid
  state.addFormData.fgsid = state.currentGsid
  request.post("/detail/add", state.addFormData).then(res => {
    ElMessage({
      type: "success",
      message: "添加成功"
    });

    request.post(`/detail/findById/`+ state.currentid).then(res =>{
      state.DetailData = res.data
    })


  }).catch(error => {
    console.log(error);
    ElMessage.error("添加失败");
  });

  resetFormData();
  dialogVisible.value = false;
}
const uploadFile = (file) => {
  const formData = new FormData;
  formData.append('file',file.file);
  request.post('/detail/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  }).then(res => {
    ElMessage.success("导入成功");
    request.post(`/detail/findById/`+ state.currentid).then(res =>{
      state.DetailData = res.data
    })


  }).catch(error => {
    ElMessage.error("导入失败");
  })
}

const batchVisible = ref(false);
const BatchRecall = () => {
  const selectedRwids = getSelectedRwids();
  if(selectedRwids.length === 0){
    ElMessage.error('请先选择重呼的任务');
    return;
  }

  if(selectedRwids.length > 1)
  {
    ElMessage.warning('请选择一个任务')
    return;
  }

  if(selectedRwids.length === 1)
  {

    console.log("+++++++++++++++++")
    console.log(selectedRwids)
    console.log("_________________")
    batchVisible.value = true



    // request.post('/task/recall',{rwids: selectedRwids}).then(res=>{
    //     // ElMessage.success('重呼成功');
    //     batchVisible.value = true
    //     load()
    //   }
    // ).catch(err => {
    //   console.error(err);
    //   ElMessage.error('任务重呼失败')
    // })
  }
}


</script>

<style>
.headerBg {
  background: #eee!important;
}
.box {
  background-color: #f1f1f1; /* 背景颜色 */
  border: 1px solid #ffffff; /* 边框，1px 宽，白色 */
  padding: 10px; /* 可选：添加内边距，以便使边框更明显 */
}
.actions-column {
  width: 200px;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow:0px 10px 10px -15px #000;
}

.status-bar {
  margin-left: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-group {
  display: flex;
  align-items: center;
}

.status-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.separator {
  width: 1px;
  height: 25px;
  background-color: #ccc;
  margin: 0 5px;
}

.button-column {
  margin-right: 15px;
}


.custom-form .el-form-item {
  margin-bottom: 4px; /* 设置每行的下边距为 3px */
}
</style>
